<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../lib/bootstrap-3.3.7.css" rel="stylesheet">
    <link href="../lib/nprogress.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <style>
        .update{
            width: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -300px;
            z-index: 100;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            background-color: rgba(0,0,0,.7);
        }
        #dv form{
            margin-bottom: 20px;
        }
        #dv .panel .panel-heading{
            position: relative;
        }
        #dv .panel .panel-heading .panel-title{
            padding: 0 0 20px 0;
        }
        #dv .panel .panel-body{
            padding: 15px 30px;
        }
        #nprogress .bar {
            background: #eea236 !important; //自定义颜色
        }
    </style>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="../lib/nprogress.js"></script>
</head>
<body>
    <div id="dv">
        <div class="mask" v-show="flag"></div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">学生表</h3>
            </div>
            <div class="panel-body">
                <std-header @addfun="add"></std-header>
                <std-main :list="list" :total="total" :size="showStudent.size"
                          @modifyfun="modify"
                          @delfun="del"
                          @prevfun="prev"
                          @nextfun="next"
                          @choosefun="choosePage"></std-main>
            </div>
        </div>
        <std-update v-show="flag" :student="student" @cancelfun="cancel" @updatefun="update"></std-update>
    </div>


    <template id="header">
        <div>
            <form class="form-inline">
                <div class="form-group">
                    <label for="Name2">名字</label>
                    <input type="text" class="form-control" id="Name2" placeholder="名字" v-model="name">
                </div>
                <div class="form-group">
                    <label for="Name">年龄</label>
                    <input type="number" class="form-control" id="Name" placeholder="年龄" v-model="age">
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked v-model="sex">
                        男
                    </label>
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="2" v-model="sex">
                        女
                    </label>
                </div>
            </form>
            <form class="form-inline">
                <div class="form-group">
                    <label for="InputName">大学</label>
                    <input type="text" class="form-control" id="InputName" placeholder="大学" v-model="edu">
                </div>
                <div class="form-group">
                    <label>城市：</label>
                    <select class="form-control" v-model="city">
                        <option value="1">北京</option>
                        <option value="2">福州</option>
                        <option value="3">厦门</option>
                        <option value="4">龙岩</option>
                        <option value="5">泉州</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="InputName1">学号</label>
                    <input type="number" class="form-control" id="InputName1" placeholder="学号" v-model="no">
                </div>
                <button type="button" class="btn btn-primary" @click.prevent="add">添加</button>
            </form>
        </div>
    </template>
    <template id="main">
        <div>
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名字</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>大学</th>
                    <th>城市</th>
                    <th>学号</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody is="transition-group" appear
                       enter-active-class="animated zoomIn"
                       leave-active-class="animated zoomOut">
                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.sex | isGender }}</td>
                    <td>{{ item.age}}</td>
                    <td>{{ item.edu}}</td>
                    <td>{{ item.city | cityFormat}}</td>
                    <td>{{ item.no}}</td>
                    <td>
                        <a href="" class="btn btn-primary" @click.prevent="modify(item.id)">修改</a>
                        <a href="" class="btn btn-warning" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" @click.prevent="prev">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li v-for="index in pages">
                        <a href="#" @click.prevent="choosePage(index)">{{ index }}</a>
                    </li>
                    <li>
                        <a href="#" aria-label="Next" @click.prevent="next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </template>
    <template id="update">
        <div class="panel panel-primary update">
            <div class="panel-heading">
                <h3 class="panel-title">修改学生表</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="input2" class="col-sm-2 control-label">名字</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="input2" placeholder="名字" v-model="upname">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Name1" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="Name1" placeholder="年龄" v-model="upage">
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别：</label>
                        <div class="col-sm-10">
                            <label>
                                <input type="radio" name="optionsRadios" value="1" checked v-model="upsex">
                                男
                            </label>
                            <label>
                                <input type="radio" name="optionsRadios" value="2" v-model="upsex">
                                女
                            </label>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="InputName2" class="col-sm-2 control-label">大学</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="InputName2" placeholder="大学" v-model="upedu">
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">城市：</label>
                        <div class="col-sm-10">
                            <select class="form-control" v-model="upcity">
                                <option value="1">北京</option>
                                <option value="2">福州</option>
                                <option value="3">厦门</option>
                                <option value="4">龙岩</option>
                                <option value="5">泉州</option>
                            </select>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="InputName11" class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="InputName11" placeholder="学号" v-model="upno">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-primary" @click="update">确定</button>
                            <button type="button" class="btn btn-warning" @click="cancel">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </template>
<script src="../js/student1.js"></script>
</body>
</html>